<template>
	<view class="">
		<view class="u-skeleton">
			<!-- #ifdef APP -->
			<view class="padding-lr padding-tb flex align-center justify-between "
				style="background: #557EFD;padding-top: 100upx;">
			<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="padding-lr padding-tb flex align-center justify-between " style="background: #557EFD">
				<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="padding-lr flex align-center justify-between " style="background: #557EFD">
					<!-- #endif -->
						<view class="flex align-center justify-between margin-right-sm" @tap.stop="goSelectCity"
							style="line-height: 68rpx;">
							<image src="../../static/images/index/place.png" style="width: 27rpx;height: 37rpx;"
								class="">
							</image>
							<view class="localName margin-left-sm text-cut" style="color: #ffffff;width: 90upx;">
								{{city}}
							</view>
						</view>
						<u-search class="flex-sub" placeholder="搜索你需要的服务" shape="round" disabled :show-action="false"
							:animation="true" bg-color="#F7F7F7" color="#1A1A1A" @click="goSearch"></u-search>
					</view>
					<view class="fw u-skeleton-fillet" v-if="swiperList.length!=0">
						<view class="fw-box">
							<swiper class="screen-swiper" style="height: 260rpx;" :circular="true" :autoplay="true"
								interval="2500" duration="800">
								<swiper-item v-for="(item,index) in swiperList" :key="index" @click="goNav(item.url)">
									<image :src="item.imageUrl" mode="aspectFit" class="radius"></image>
								</swiper-item>
							</swiper>
							<view class="ordernoticebar" v-if="orderBroadcastList.length > 0">
								<ordernoticebar :list="orderBroadcastList"></ordernoticebar>
							</view>
						</view>
					</view>
					
					<view class="category" v-if="navlist.length>0&&XCXIsSelect!='否'">
						<view class="box">
							<swiper class="swiper" duration="300" :style="{ height: categoryHeight }"
								@change="categoryChange">
								<swiper-item v-for="(nav, index5) in navlist" :key="index5">
									<view class="category-list">
										<view class="icon" v-for="(item,ind) in nav" :key="ind"
											@click="goNav(item.url)">
											<image :src="item.imageUrl"
												style="width: 92rpx;height: 92rpx;border-radius: 92rpx;">
											</image>
											<view class="grid-text">{{item.name}}</view>
										</view>
									</view>
								</swiper-item>
							</swiper>
							<view class="dots">
								<view v-for="(page, pageindex) in navlist" :key="pageindex"
									:class="{ active: pageindex == currentPageindex }"></view>
							</view>
						</view>
					</view>


					<!-- <view style="width: 95%;margin: 0 auto;" v-if="renzheng && XCXIsSelect != '否'">
					<view style="width: 100%;height: 130rpx;" @click="bindRz">
						<image src="../../static/images/ruzhu.png" style="width: 100%;height: 100%;"></image>
					</view>
				</view> -->
					<!-- <view class="margin" @click="gowanneg()" v-if="XCXIsSelect != '否'">
					<image src="../../static/images/index/wanneng.png" style="width: 100%;" mode="widthFix"></image>
				</view> -->

					<view class="padding-top-sm u-skeleton-fillet" style="background: #F7F7F7;padding-bottom: 90rpx;">
						<view class="bg flex align-center margin-lr-sm padding-lr margin-bottom"
							v-if="messageList.length > 0">
							<view style="margin-top: 8upx;" class="margin-right">
								<image mode="aspectFit" src="../../static/images/index/gonggao (2).png"
									style="width: 110upx;height: 100upx;">
								</image>
							</view>
							<swiper :autoplay="true" :vertical="false" :interval="4000" :circular="true"
								:indicator-dots="false" class="index_gonggao">
								<block v-for="(item, index) in messageList">
									<swiper-item @tap='toGoodsInfo(item.url)'>
										<view class="">{{item.title}}</view>
									</swiper-item>
								</block>
							</swiper>
						</view>



						<!-- 推荐师傅 -->
						<view class="bg margin-lr-sm padding-sm radius " v-if="sflist.length!=0&&XCXIsSelectShifu!='否'">
							<view class="flex justify-between text-white padding-bottom-sm ">
								<view class="flex align-center">推荐师傅</view>
								<view @tap="gosflist()">
									更多
									<image class="margin-left-sm"
										style="width: 14rpx;height: 24rpx;display: inline-block;"
										src="../../static/images/index/right.png"></image>
								</view>
							</view>
							<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
								<view class="scroll-view-item_H " v-for="(item,index) in sflist" :key='index'
									@click="gosfdetail(item.id)">
									<view class="u-relative" style="width:180rpx;">
										<image style="width:180rpx;height: 180rpx;border-radius: 10rpx;"
											mode="aspectFill" :src="item.avatar?item.avatar: '../../static/logo.png'">
										</image>
										<view class="sfdw" v-if="item.distance">
											<view class="flex align-center">
												<image src="../../static/images/sfwz.png"
													style="width:25rpx;height: 25rpx;"></image>
												<view class="text-cut" style="margin-left: 5rpx;">
													{{item.distance}}
												</view>
											</view>
										</view>
									</view>

								</view>
							</scroll-view>
						</view>

						<!-- 推荐商家 -->
						<view class="bg margin-lr-sm padding-sm radius " v-if="shoplist.length!=0&&XCXIsSelectShop!='否'"
							:style="sflist.length!=0?'margin-top:30rpx':''">
							<view class="flex justify-between text-white padding-bottom-sm ">
								<view class="flex align-center">
									<image src="../../static/images/index/tjshop.png"
										style="width: 149upx;height: 37upx;">
									</image>
									<view class="jingxunbox">精选商家</view>
								</view>
								<view @tap="goshoplist()">
									更多
									<image class="margin-left-sm"
										style="width: 14rpx;height: 24rpx;display: inline-block;"
										src="../../static/images/index/right.png"></image>
								</view>
							</view>
							<view class="flex " style="overflow: hidden;">
								<view v-for="(item,index) in shoplist" :key='index' @click="shop(item.userId)"
									style="width: 200rpx;margin-right:35upx;">
									<view class="u-relative">
										<image style="width: 200rpx;height: 200rpx;border-radius: 10rpx;"
											mode="aspectFill" :src="item.shopImg?item.shopImg: '../../static/logo.png'">
										</image>
									</view>
									<view class="text-white text-30 u-line-1 " style="margin-left: 10rpx;">
										{{item.shopName}}
									</view>
								</view>
							</view>
						</view>
						<!-- 优惠专区 -->
						<view class="bg margin-lr-sm padding-sm radius "
							v-if="lowTaking.length!=0&&XCXIsSelectYouhui!='否'"
							:style="shoplist.length!=0?'margin-top:30rpx':''">
							<view class="flex justify-between text-white padding-bottom-sm ">
								<view class="flex align-center">
									<image src="../../static/images/index/youhui.png"
										style="width: 149upx;height: 37upx;">
									</image>
									<view class="jingxunbox">精选服务</view>
								</view>
								<view @tap="goLowTaking()">
									更多
									<image class="margin-left-sm"
										style="width: 14rpx;height: 24rpx;display: inline-block;"
										src="../../static/images/index/right.png"></image>
								</view>
							</view>
							<view class="flex " style="overflow: hidden;">
								<view v-for="(item,index) in lowTaking" :key='index' @click="goOrder(item)"
									style="width: 200rpx;margin-right:35upx;">
									<view class="u-relative">
										<image style="width: 200rpx;height: 200rpx;border-radius: 10rpx;"
											mode="aspectFill"
											:src="item.homepageImg?item.homepageImg: '../../static/logo.png'">
										</image>
									</view>
									<view class="text-white text-30 u-line-1 " style="margin-left: 10rpx;">
										{{item.myLevel}}
									</view>
									<view class="margin-top-xs">
										<view style="color:#FF1200">
											{{isVip? item.memberMoney :item.money}}元/{{item.unit}}
										</view>
									</view>
								</view>
							</view>
						</view>


						<block class="u-skeleton-fillet" v-for="(item,index) in order" :key="index">
							<view v-if="item.show" class="bg margin-lr-sm padding-sm radius margin-tb">
								<view class="flex justify-between text-white padding-bottom-sm ">
									<view style="font-weight: 600;">{{item.gameName}}</view>
									<view @tap="goLowTakings(item.gameName,item.id)">
										更多
										<image class="margin-left-sm"
											style="width: 14rpx;height: 24rpx;display: inline-block;"
											src="../../static/images/index/right.png"></image>
									</view>
								</view>
								<view class="flex " style="overflow: hidden;">
									<view v-for="(ite,ind) in item.orderTakingList" :key='ind' @click="goOrder(ite)"
										style="width: 200rpx;margin-right: 35upx;">
										<view class="u-relative">
											<image style="width: 200rpx;height: 200rpx;border-radius: 10rpx;"
												mode="aspectFill"
												:src="ite.homepageImg?ite.homepageImg: '../../static/logo.png'">
											</image>
										</view>
										<view class="text-white text-30 u-line-1 "
											style="font-family: PingFang-SC-Bold;">
											{{ite.myLevel}}
										</view>
										<view class="margin-top-xs">
											<view style="color:#FF1200">
												{{isVip? ite.memberMoney :ite.money}}元/{{ite.unit}}
											</view>
										</view>
									</view>
								</view>

							</view>
						</block>
					</view>

					<!-- 新人红包 -->
					<u-popup v-model="popushongbao" :showBg="false" mode="center">
						<view>
							<image @click="GetQuan" :src="coupon3.couponPicture" style="width: 564upx;height:618upx ">
							</image>
						</view>
					</u-popup>


					<u-tabbar :list="tabbarList" :mid-button="true" bg-color="#FFFFFF" active-color="#557EFD"
						inactive-color="#999999">
					</u-tabbar>
				</view>
				<u-skeleton :loading="loading" :animation="true" elColor='#999999' bgColor='#FFFFFF'></u-skeleton>
				<u-popup v-model="popusAuthorization" :showBg="false" mode="center">
					<view class="contentview">
						<view class="title">隐私保护指引</view>
						<view class="des" @click="openPrivacyContract">
							在使用当前小程序服务之前，请仔细阅读<text
								style="color: #557EFD;">{{privacyContractName}}</text>。如你同意{{privacyContractName}}，请点击“同意”开始使用。
						</view>
						<view class="btns">
							<button class="item reject" @click="exitMiniProgram">拒绝</button>
							<button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization"
								@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
						</view>
					</view>
				</u-popup>
			</view>
</template>

<script>
	import empty from '@/components/empty.vue'

	export default {
		components: {
			empty,
		},
		data() {
			return {
				privacyContractName: '',
				popusAuthorization: false,


				currentPageindex: 0,
				categoryHeight: '150rpx',
				navlist: [],
				popushongbao: false,
				loading: false, // 是否显示骨架屏组件

				swiperList: [],
				gridData: [],
				lowTaking: [],
				shoplist: [], //推荐商家
				sflist: [], //推荐师傅
				game: [],

				backgroundImage: '',
				tuiguang: '',
				invitationCode: '',
				city: '请选择城市',
				latitude: '',
				longitude: '',

				token: '',
				XCXIsSelect: '是',
				isVip: false,
				myId: uni.getStorageSync('userId') ? uni.getStorageSync('userId') : '',
				showModal: true,
				arr: [],
				tab: '',
				geRen: 0,
				Qe: 0,
				order: [],
				messageList: [],
				first: true,
				couponNum: '',
				couponId: '',
				newYouhui: 0,

				coupon3: {},


				tabbarList: this.$store.state.list,

				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				XCXIsSelectShifu: '否',
				XCXIsSelectShop: '否',
				XCXIsSelectYouhui: '否',
				orderBroadcastList: [],
			}
		},
		onShareAppMessage(res) {
			return {
				path: '/pages/index/index?invitation=' + this.invitationCode, //这是为了传参   onload(data){let id=data.id;}
				title: this.tuiguang,
				imageUrl: this.backgroundImage
			}
		},
		/*
		 * uniapp微信小程序分享页面到微信朋友圈
		 */
		onShareTimeline(res) {
			return {
				path: '/pages/index/index?invitation=' + this.invitationCode, //这是为了传参   onload(data){let id=data.id;}
				title: this.tuiguang,
				imageUrl: this.backgroundImage
			}
		},

		onLoad(e) {
			this.$nextTick(() => {
				this.loading = false
			})

			// #ifdef MP-WEIXIN
			try {
				wx.getPrivacySetting({
					success: res => {
						console.log("是否需要授权：", res.needAuthorization, "隐私协议的名称为：", res.privacyContractName)
						if (res.needAuthorization) {
							this.privacyContractName = res.privacyContractName;
							// this.$refs.popusAuthorization.open();
							this.popusAuthorization = true
						}
					},
					fail: () => {},
					complete: () => {},
				})
			} catch (e) {
				//TODO handle the exception
			}
			// #endif
			let that = this

			// #ifdef MP-WEIXIN
			if (e.shopUserId) {
				uni.navigateTo({
					url: '/pages/index/game/shop?shopUserId=' + e.shopUserId
				})
			}
			// #endif

			that.$Request.getT('/app/common/type/255').then(res => {
				if (res.code === 0) {
					if (res.data && res.data.value) {
						this.tuiguang = res.data.value;
					}
				}
			});
			if (!uni.getStorageSync('city')) {
				uni.getLocation({
					type: 'gcj02',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						console.log(res, '地理位置')
						that.latitude = res.latitude
						that.longitude = res.longitude
						uni.setStorageSync('latitude', res.latitude)
						uni.setStorageSync('longitude', res.longitude)

						that.selectCity(that.longitude, that.latitude);
					},
					fail: function() {
						console.log('获取地址失败')
					}
				})
			}
			// #ifdef MP-WEIXIN
			if (e.scene) {
				const scene = decodeURIComponent(e.scene);
				that.$queue.setData('inviterCode', scene.split(',')[0]);
			}
			// #endif

			// 获取邀请码保存到本地
			if (e.invitation) {
				that.$queue.setData('inviterCode', e.invitation);
			}
			let userId = uni.getStorageSync('userId')
			that.$Request.getT('/app/common/type/249').then(async res => { //私聊消息通知
				if (res.code == 0) {
					if (res.data && res.data.value) {
						await that.arr.push(res.data.value)
					}
				}
			})
			that.$Request.getT('/app/common/type/236').then(async res => { //退款通知
				if (res.code == 0) {
					if (res.data && res.data.value) {
						await that.arr.push(res.data.value)
					}
				}
			})

			that.$Request.getT('/app/common/type/312').then(async res => { //订单状态通知
				if (res.code == 0) {
					if (res.data && res.data.value) {
						await that.arr.push(res.data.value)
					}
				}
			})

			if (userId) {
				that.$Request.getT('/app/common/type/307').then(res => { //新人领取优惠劵Id
					if (res.code == 0) {
						if (res.data && res.data.value) {
							console.log("res", res.data);
							let coupon = res.data.value.split(',')
							that.couponId = coupon[0]

							let a = {
								couponId: that.couponId
							}

							// 根据优惠卷id查询优惠卷
							this.$Request.get('/app/couponUser/getCouponById', a).then(res => {
								if (res.code == 0) {
									console.log("数据", res.data);
									that.coupon3 = res.data;
								}
							})

							that.couponNum = coupon[1]
							// console.log(that.couponId,that.couponNum)
						}
					}
				})
			}
			// this.Qe = uni.getStorageSync("Qe")
			// this.geRen = uni.getStorageSync("geRen")
		},
		mounted() {
			console.log('this.loading this.loading ', this.loading)
		},
		onShow() {
			let that = this
			that.XCXIsSelectShifu = that.$queue.getData('XCXIsSelectShifu');
			that.XCXIsSelectShop = that.$queue.getData('XCXIsSelectShop');
			that.XCXIsSelectYouhui = that.$queue.getData('XCXIsSelectYouhui');

			that.XCXIsSelect = that.$queue.getData('XCXIsSelect');
			that.Qe = uni.getStorageSync("Qe")
			that.geRen = uni.getStorageSync("geRen")

			if (that.Qe == 2 || that.geRen == 2) {
				that.renzheng = false
			} else {
				that.renzheng = true
			}
			that.city = uni.getStorageSync('city') ? uni.getStorageSync('city') : '请选择城市'
			that.getxiaoxi()
			that.getBannerList()
			that.getGrid()
			that.getLowTaking()
			that.getShopList()
			that.getsflist()
			that.getorderList()
			that.getBackImageList();

			that.token = uni.getStorageSync('token')
			if (uni.getStorageSync('token')) {
				that.getUserInfo();
				that.getIsVip()
			}
			that.myId = uni.getStorageSync('userId')
			if (that.first && that.myId) {
				that.$Request.get('/app/common/type/308').then(res => { //是否开启新人优惠券配置  0不开启 1开启
					if (res.code == 0 && res.data.value == 1) {
						that.$Request.get("/app/user/selectUserById").then(res => {
							if (res.code == 0 && res.data) {
								if (res.data.isNewPeople == 1) {
									that.popushongbao = true
									that.first = false
								} else {
									that.first = true
								}
								uni.setStorageSync('userType', res.data.userType)
							}
						});
					}
				});
			}

			// #ifdef MP-WEIXIN
			//订阅
			if (that.myId) {
				if (that.showModal) {
					that.openMsg()
				}
			}
			// #endif
			this.getOrderBroadcastList();
		},
		methods: {
			/**
			 * 获取播报列表
			 */
			getOrderBroadcastList(){
				this.$Request.get('/app/orders/orderBroadcast').then(res=>{
					this.orderBroadcastList = res.data;
				})
			},
			// 打开隐私协议页面
			openPrivacyContract() {
				let that = this;
				wx.openPrivacyContract({
					fail: () => {
						that.$queue.showToast('遇到错误无法打开！');
					}
				})
			},
			// 拒绝隐私协议
			exitMiniProgram() {
				// 直接退出小程序
				wx.exitMiniProgram()
			},
			// 同意隐私协议
			handleAgreePrivacyAuthorization() {
				// this.$refs.popusAuthorization.close();
				this.popusAuthorization = false
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			//更新分类指示器
			categoryChange(event) {
				this.currentPageindex = event.detail.current;
			},
			GetQuan() {
				console.log("点击");
				let data = {
					couponId: this.couponId,
					num: this.couponNum
				}
				this.$Request.get('/app/couponUser/receiveEnvelope', data).then(res => {
					if (res.code == 0) {
						this.first = false
						this.popushongbao = false
						uni.showToast({
							title: '领取成功',
							icon: 'none',
						})
						setTimeout(d => {
							uni.navigateTo({
								url: '/my/youhuijuan/myList'
							});
						}, 1000);
					}
				});
			},
			getBackImageList() {
				this.$Request.getT('/app/banner/selectBannerList?state=-1&classify=5').then(res => {
					if (res.code === 0) {
						this.backgroundImage = res.data[0].imageUrl;
					}
				});
			},
			getUserInfo() {
				this.$Request.get("/app/user/selectUserById").then(res => {
					if (res.code == 0) {
						this.invitationCode = res.data.invitationCode
						uni.setStorageSync('isAuthentication', res.data.isAuthentication)
						uni.setStorageSync('avatar', res.data.avatar)
						uni.setStorageSync('invitationCode', res.data.invitationCode)
						uni.setStorageSync('zhiFuBao', res.data.zhiFuBao)
						uni.setStorageSync('zhiFuBaoName', res.data.zhiFuBaoName)
					}
				});
			},
			goPage(url) {
				if (url.indexOf('/pages/') !== -1) {
					uni.navigateTo({
						url
					});
				} else {


					//#ifndef H5
					uni.navigateTo({
						url: '/pages/index/webView?url=' + url
					});
					//#endif
					//#ifdef H5
					window.location.href = url;
					//#endif


				}
			},
			getxiaoxi() {
				this.$Request.get('/app/message/page/1/1/10').then(res => {
					if (res.code == 0) {
						this.messageList = res.data.list

					}
				});
			},
			bindRz() {
				// uni.setStorageSync('renzheng',res.data.status)
				let token = uni.getStorageSync('token')
				if (token) {
					uni.navigateTo({
						url: '../../my/renzheng/index?classify=' + 1
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				}
			},
			selectCity(longitude, latitude) {
				this.$Request.get('/app/Login/selectCity?lat=' + latitude + '&lng=' + longitude).then(res => {
					if (res.code == 0) {
						this.city = res.data.city ? res.data.city : '未知'
						uni.setStorageSync('city', res.data.city)
						this.getsflist()
					}
				});
			},
			// 开启订阅消息
			openMsg() {
				console.log('订阅消息', this.arr)
				var that = this
				uni.getSetting({
					withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
					success(ret) {
						console.log(ret, "getSetting");
						console.log(ret.subscriptionsSetting, '------------------')
						// if (ret.subscriptionsSetting.itemSettings && Object.keys(ret.subscriptionsSetting.itemSettings).length == 2) {
						if (ret.subscriptionsSetting.itemSettings) {
							uni.setStorageSync('sendMsg', true)
							uni.openSetting({ // 打开设置页
								success(rea) {
									console.log("1111", rea.authSetting)
								}
							});
						} else { // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
							console.log(99999)
							uni.setStorageSync('sendMsg', false)
							uni.showModal({
								title: '提示',
								content: '为了更好的体验,请绑定消息推送',
								confirmText: '确定',
								cancelText: '取消',
								success: function(res) {
									if (res.confirm) {
										wx.requestSubscribeMessage({
											tmplIds: that.arr,
											success(re) {
												console.log(JSON.stringify(re),
													'++++++++++++++')
												var datas = JSON.stringify(re);
												if (datas.indexOf("accept") != -1) {
													console.log(re)
													uni.setStorageSync('sendMsg', true)
												}
											},
											fail: (res) => {
												console.log(res)
											}
										})
										uni.setStorageSync('sendMsg', true)
										console.log('确认')
										that.showModal = false
									} else if (res.cancel) {
										console.log('取消')
										uni.setStorageSync('sendMsg', false)
										that.showModal = true
									}
								}
							})
						}
					}
				})
			},
			getIsVip() {
				this.$Request.get("/app/UserVip/isUserVip").then(res => {
					if (res.code == 0) {
						this.isVip = res.data
						uni.setStorageSync('isVIP', res.data)
					}
				});
			},
			getorderList() {
				let data = {
					latitude: uni.getStorageSync('latitude'),
					longitude: uni.getStorageSync('longitude'),
				}
				this.$Request.get("/app/appGame/selectClassifyServiceList", data).then(res => {
					if (res.code == 0) {
						res.data.map(item => {
							if (item.orderTakingList && (item.orderTakingList).length > 0) {
								item.show = true
							} else {
								item.show = false
							}
						})
						this.order = res.data
						// this.loading = false
					}
				})
			},
			// 切换菜单
			tabChange(tab) {
				this.tabIndex = tab.id
				if (uni.getStorageSync('sendMsg')) {
					console.log('授权+1')
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							console.log(JSON.stringify(re), 111111111111)
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								// console.log(re)
							}
						},
						fail: (res) => {
							// console.log(res)
						}
					})
				}
				this.defaultIndex = [0, 0, 0]
				// this.$refs.uDropdown.close();
				// this.orderList = []; // 置空列表,显示加载进度条
				this.mescroll.resetUpScroll()
			},

			// 跳转万能任务
			gowanneg() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/other/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}

			},
			//获取轮播图
			getBannerList() {
				this.$Request.get("/app/banner/selectBannerList", {
					classify: 1
				}).then(res => {
					if (res.code == 0) {
						this.swiperList = res.data
					}
				});
			},
			// 获取金刚区分类
			getGrid() {
				this.$Request.get("/app/banner/selectBannerList", {
					classify: 2
				}).then(res => {
					if (res.code == 0) {
						// this.gridData.push(res.data);
						// this.gridData.push(res.data);
						// this.gridData.push(res.data);
						// this.gridData = res.data
						// console.log(this.gridData, '；；；；；；')

						if (res.data.length > 0) {
							var datanew = this.chunk(res.data, 10)
							this.navlist = datanew;
							console.log('navlist的数据', datanew)
							if (res.data.length > 5) {
								this.categoryHeight = "300rpx"
							} else {
								this.categoryHeight = "150rpx"
							}
						} else {
							this.navlist = [];
						}
					}
				});
			},
			// 传进数组和指定个数，进行拆分
			chunk: function(array, size) {
				//获取数组的长度，如果你传入的不是数组，那么获取到的就是undefined
				const length = array.length
				//判断不是数组，或者size没有设置，size小于1，就返回空数组
				if (!length || !size || size < 1) {
					return []
				}
				//核心部分
				let index = 0 //用来表示切割元素的范围start
				let resIndex = 0 //用来递增表示输出数组的下标

				//根据length和size算出输出数组的长度，并且创建它。
				let result = new Array(Math.ceil(length / size))
				//进行循环
				while (index < length) {
					//循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
					result[resIndex++] = array.slice(index, (index += size))
				}
				//输出新数组
				return result
			},
			// 推荐商家
			getShopList() {
				this.$Request.get("/app/userCertification/queryCertification", {
					page: 1,
					limit: 3,
					isRecommend: 1,
					classify: 2,
					latitude: uni.getStorageSync('latitude'),
					longitude: uni.getStorageSync('longitude'),
				}).then(res => {
					if (res.code == 0) {
						this.shoplist = res.data.list
					}
				});
			},
			//推荐师傅
			getsflist() {
				this.$Request.get("/app/userCertification/queryCertification", {
					page: 1,
					limit: 50,
					onLine: 1,
					classify: 1,
					latitude: uni.getStorageSync('latitude'),
					longitude: uni.getStorageSync('longitude'),
				}).then(res => {
					if (res.code == 0) {
						for (let i = 0; i < res.data.list.length; i++) {
							if (res.data.list[i].distance) {
								if (res.data.list[i].distance >= 1000) {
									res.data.list[i].distance = (res.data.list[i].distance / 1000).toFixed(1) +
										'km'
								} else {
									res.data.list[i].distance = parseFloat(res.data.list[i].distance).toFixed(
										1) + 'm'
								}
							}
						}
						this.sflist = res.data.list
					}
				});
			},
			// 优惠专区
			getLowTaking() {
				let data = {
					latitude: uni.getStorageSync('latitude'),
					longitude: uni.getStorageSync('longitude'),
					condition: 3
				}
				this.$Request.get("/app/orderTaking/queryLowTaking", data).then(res => {
					if (res.code == 0) {
						this.lowTaking = res.data
					}
				});
			},
			// 选择城市
			goSelectCity() {
				// uni.navigateTo({
				// 	url: '/pages/index/citys/citys'
				// });
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						that.longitude = res.longitude
						that.latitude = res.latitude
						uni.setStorageSync('latitude', res.latitude)
						uni.setStorageSync('longitude', res.longitude)
						that.selectCity(that.longitude, that.latitude);
					}
				});
			},
			// 优惠专区
			goLowTaking() {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				if (this.token) {
					uni.navigateTo({
						url: '/pages/index/game/lowTaking'
					});
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
			},
			//服务列表查看更多
			goLowTakings(name, parentId) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				if (this.token) {
					uni.navigateTo({
						url: '/pages/index/game/myOrder?name=' + name + '&parentId=' + parentId +
							'&classparentId=' + parentId
					});
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
			},
			//商家推荐
			goshoplist() {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				if (this.token) {
					uni.navigateTo({
						url: '/package/pages/shop/index'
					});
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
			},
			//附近师傅
			gosflist() {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					console.log('授权+1')
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				if (this.token) {
					uni.navigateTo({
						url: '/package/pages/shop/sflist'
					});
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
			},

			// 跳转游戏列表
			goNav(url) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					console.log('授权+1')
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				if (url === '全部服务') {
					uni.switchTab({
						url: '/pages/classification/classification'
					})
					return;
				}
				if (url.indexOf('/pages/') !== -1 || url.indexOf('/my/') !== -1 || url.indexOf('/package/') !== -1) {
					uni.navigateTo({
						url
					});
				} else {
					//#ifndef H5
					uni.navigateTo({
						url: '/pages/index/webView?url=' + url
					});
					//#endif
					//#ifdef H5
					window.location.href = url;
					//#endif
				}
			},
			// 跳转搜索
			goSearch() {
				if (uni.getStorageSync('sendMsg')) {
					console.log('授权+1')
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(JSON.stringify(re), 111111111111)
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				uni.navigateTo({
					url: '/pages/index/search/index'
				});
			},
			// 跳转订单
			goOrder(e) {

				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					console.log('授权+1')
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							console.log(JSON.stringify(re), 111111111111)
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif

				if (this.token) {
					uni.navigateTo({
						url: '/pages/index/game/order?id=' + e.id
					});
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}

			},
			// 跳转店铺
			shop(userId) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					console.log('授权+1')
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							console.log(JSON.stringify(re), 111111111111)
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				if (this.token) {
					uni.navigateTo({
						url: '/pages/index/game/shop?shopUserId=' + userId
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}

			},
			//跳转师傅详情
			gosfdetail(userId) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					console.log('授权+1')
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							console.log(JSON.stringify(re), 111111111111)
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				if (this.token) {
					uni.navigateTo({
						url: '/package/pages/shop/sfdetail?sfUserId=' + userId
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.bg {
		background: #FFFFFF;
	}

	.category {
		width: 100%;

		.box {
			width: 100%;
			border-radius: 20upx;
			background-color: #ffffff;

			.dots {
				display: flex;
				justify-content: center;
				height: 15upx;
				width: 100%;

				view {
					width: 30upx;
					height: 5upx;
					background-color: rgba(0, 0, 0, 0.2);

					&.active {
						background-color: #557EFD;
					}
				}
			}

			.swiper {
				width: 100%;
				padding: 10upx 0;

				.uni-swiper-dot {
					width: 20upx;
				}

				.category-list {
					width: 100%;
					height: auto;
					display: flex;
					justify-content: flex-start;
					padding: 10upx 0;
					flex-flow: wrap;

					.icon {
						width: 20%;
						display: flex;
						flex-flow: wrap;
						justify-content: center;
						font-size: 22upx;
						color: #666;
						margin-bottom: 20upx;
						position: relative;

						image {
							width: 70%;
							height: 13.3vw;
						}

						view {
							width: 100%;
							display: flex;
							justify-content: center;
						}

						.remen,
						.lijian {
							width: 60upx;
							height: 30upx;
							position: absolute;
							top: 0;
							right: 0;
						}
					}
				}
			}
		}
	}

	// .sticky-tabs {
	// 	z-index: 990;
	// 	position: sticky;
	// 	top: var(--window-top);
	// 	// background-color: #fff;
	// }

	// /* // 使用mescroll-uni,则top为0 */
	// .mescroll-uni,
	// /deep/.mescroll-uni {
	// 	.sticky-tabs {
	// 		top: 0;
	// 	}
	// }

	.demo-tip {
		padding: 18upx;
		font-size: 24upx;
		text-align: center;
	}

	.line_s {
		display: inline-flex;
		width: 10rpx;
		height: 10rpx;
		background: #1AD566;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.line_x {
		display: inline-flex;
		width: 10rpx;
		height: 10rpx;
		background: #000000;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.weix image {
		width: 54upx;
		height: 15upx;
	}

	.nameclore {
		text-align: center;
		font-size: 28upx;
		padding: 0rpx 20rpx;
	}

	.nameclore.tui-tab-item-title-active {
		color: #5E81F9;
		font-size: 30upx;
	}

	.fw {
		width: 100%;
		// height: 180rpx;
		background: linear-gradient(to bottom, #557EFD 5%, #FFFFFF 90%);
		display: flex;
		justify-content: center;
		align-items: flex-end;

		.fw-box {
			width: 710rpx;
			// height: 160rpx;
			// background-color: #ffffff;
			border-radius: 24rpx;
			margin-top: 20rpx;
			position: relative;
			
			.ordernoticebar{
				position: absolute;
				left: 10rpx;
				bottom: 40rpx;
				width: 350rpx;
			}
			
		}
	}

	.index_gonggao {
		color: #45AEFF;
		width: 550rpx;
		height: 68rpx;
		// background: #EAF4FE;
		border-radius: 50rpx;
		align-items: center;
		line-height: 50rpx;
		padding: 10rpx 15rpx;

	}

	.jingxunbox {
		// width: 110upx;
		// height: 38upx;
		background: linear-gradient(97deg, #AD927D 5%, #EFD6C2 46%, #CAA794 100%);
		border-radius: 4upx;
		padding: 4upx 20upx;
		color: #333333;
		font-size: 26upx;
		margin-left: 20upx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 180rpx;
		margin-right: 20upx;
		// height: 300rpx;
		// line-height: 300rpx;
		// text-align: center;
		// font-size: 36rpx;
	}

	.sfdw {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 5rpx;
		z-index: 99;
		background-color: rgba(0, 0, 0, 0.3);
		width: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5rpx 0rpx;
		color: #bcbcbe;
		font-size: 26rpx;
	}

	// 隐私协议i样式
	.privacy {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 9999999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.contentview {
		width: 632rpx;
		padding: 48rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 16rpx;
	}

	.contentview .title {
		text-align: center;
		color: #333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.contentview .des {
		font-size: 26rpx;
		color: #666;
		margin-top: 40rpx;
		text-align: justify;
		line-height: 1.6;
	}

	.contentview .des .link {
		color: #557EFD;
		text-decoration: underline;
	}

	button::after {
		border: none;
	}

	.btns {
		margin-top: 48rpx;
		display: flex;
	}

	.btns .item {
		justify-content: space-between;
		width: 244rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 16rpx;
		box-sizing: border-box;
		border: none;
	}

	.btns .reject {
		background: #f4f4f5;
		color: #909399;
	}

	.btns .agree {
		background: #557EFD;
		color: #fff;
	}
</style>
